<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简化后代码写法</title>
    <style>
        table, th, td {
            border: 1px solid black;
            border-collapse: collapse;
            padding: 10px;
        }
    </style>
</head>
<body>

<button id="btnEle">点我你会爆炸</button>

<table>
    <tr>
        <th>地雷</th>
        <th>事件响应函数</th>
    </tr>
    <tr>
        <td>兵工厂生产地雷</td>
        <td>声明函数</td>
    </tr>
    <tr>
        <td>确定地雷埋设的位置</td>
        <td>获取绑定事件响应函数的元素对象（按钮）</td>
    </tr>
    <tr>
        <td>埋地雷</td>
        <td>把函数绑定到按钮元素对象的事件属性上</td>
    </tr>
    <tr>
        <td>地雷触发引信爆炸</td>
        <td>事件响应函数是在用户操作过程中触发事件才会执行</td>
    </tr>
    <tr>
        <td>地雷的引信有很多种不同形式</td>
        <td>事件类型也有很多</td>
    </tr>

</table>

事件类型：
<ul>
    <li>★单击事件</li>
    <li>★值改变事件（表单元素中，用户输入的数据发生了变化）</li>
    <li>失去焦点事件</li>
    <li>双击事件</li>
    <li>鼠标移入（移入控件范围）事件</li>
    <li>鼠标移出（移出控件范围）事件</li>
    <li>鼠标移动（在控件范围内移动）事件</li>
    <li>获得焦点事件</li>
    <li>……</li>
</ul>

回调函数：
<ul>
    <li>任何函数都是先声明出来，然后再被调用</li>
    <li>普通函数：声明之后，我们自己调用它</li>
    <li>回调函数：声明之后，不是我们自己调用，而是交给系统来调用</li>
</ul>

系统调用回调函数：浏览器监听单击事件，什么时候发现事件触发了，什么时候来调用我们绑定的函数

</body>
<script>
    document.getElementById("btnEle").onclick = function (){
        alert("你又爆炸了！！！");
    };

    // 普通函数：声明
    function sum(a, b) {
        return a + b;
    }

    // 普通函数：我们自己调用
    sum(5, 8);
</script>
</html>